﻿<template>
  <div class="jnpf-content-wrapper">
    <div class="jnpf-content-wrapper-center">
      <div class="a-box">
        <a-row :gutter="24">
          <a-col :span="18">
            <a-tabs size="small">
              <a-tab-pane key="1" tab="缴费查询">
                <a-form :label-col="{ style: { width: '80px' } }">
                  <a-row :gutter="24">
                    <a-col :span="formSpan">
                      <a-form-item name="nameCode">
                        <JnpfInput v-model:value="dataForm.nameCode" placeholder="请输入" addonBefore="关键字"
                          suffix-icon="icon-ym icon-ym-search" allowClear :style='{ "width": "100%" }' />
                      </a-form-item>
                    </a-col>
                    <a-col :span="3">
                      <a-button type="primary" block @click="handleOpen">查询</a-button>
                    </a-col>
                    <a-col :span="3">
                      <a-button type="default" block
                        style="background-color: #efbd47; color: #fff; border: none;">重置</a-button>
                    </a-col>
                    <a-col :span="6">
                      <a-form-item name="address">
                        <JnpfInput v-model:value="dataForm.address" disabled addonBefore="地址"
                          :style='{ "width": "100%" }' />
                      </a-form-item>
                    </a-col>
                    <a-col :span="6">
                      <div class="comment">
                        {{ dataForm.comment }}
                      </div>
                    </a-col>

                    <a-col :span="formSpan">
                      <a-form-item name="customerCode">
                        <JnpfInput v-model:value="dataForm.customerCode" disabled addonBefore="用户编号" allowClear
                          :style='{ "width": "100%" }' />
                      </a-form-item>
                    </a-col>
                    <a-col :span="formSpan">
                      <a-form-item name="customerName">
                        <JnpfInput v-model:value="dataForm.customerName" disabled addonBefore="用户姓名" allowClear
                          :style='{ "width": "100%" }' />
                      </a-form-item>
                    </a-col>
                    <a-col :span="formSpan">
                      <a-form-item name="mobilePhone">
                        <JnpfInput v-model:value="dataForm.mobilePhone" disabled addonBefore="手机号码" allowClear
                          :style='{ "width": "100%" }' />
                      </a-form-item>
                    </a-col>
                    <a-col :span="formSpan">
                      <a-form-item name="factoryNum">
                        <JnpfInput v-model:value="dataForm.factoryNum" disabled addonBefore="水表编号" allowClear
                          :style='{ "width": "100%" }' />
                      </a-form-item>
                    </a-col>

                    <a-col :span="0">
                      <a-form-item name="actualAmount">
                        <JnpfInput v-model:value="dataForm.actualAmount" disabled addonBefore="综合水费"
                          :style='{ "width": "100%" }' />
                      </a-form-item>
                    </a-col>
                    <a-col :span="0">
                      <a-form-item name="overdueAmount">
                        <JnpfInput v-model:value="dataForm.overdueAmount" disabled addonBefore="违约金额"
                          :style='{ "width": "100%" }' />
                      </a-form-item>
                    </a-col>

                    <a-col :span="formSpan">
                      <a-form-item name="arrears">
                        <JnpfInput v-model:value="dataForm.arrears" disabled addonBefore="合计金额"
                          :style='{ "width": "100%" }' />
                      </a-form-item>
                    </a-col>
                    <a-col :span="formSpan">
                      <a-form-item name="perviousBalance">
                        <JnpfInput v-model:value="dataForm.perviousBalance" disabled addonBefore="上次余额"
                          :style='{ "width": "100%" }' />
                      </a-form-item>
                    </a-col>
                    <a-col :span="formSpan">
                      <a-form-item name="receivableAmount">
                        <JnpfInput v-model:value="dataForm.receivableAmount" disabled addonBefore="应收金额"
                          :style='{ "width": "100%" }' />
                      </a-form-item>
                    </a-col>

                    <a-col :span="formSpan">
                      <a-button type="primary" block @click="handleOpenPayment">缴费</a-button>
                    </a-col>

                  </a-row>
                </a-form>

              </a-tab-pane>
            </a-tabs>
          </a-col>

          <a-col :span="6">
            <a-tabs size="small">
              <a-tab-pane key="1" tab="更多功能">
                <a-form>
                  <a-row :gutter="24">
                    <a-col :span="opearSpan">
                      <a-button type="default" block @click="handleOpenPrepay"
                        style="background-color: #55d187; color: #fff;border: none;">预存</a-button>
                    </a-col>
                    <a-col :span="opearSpan">
                      <a-form-item>
                        <a-button type="primary" size="normal" block>补打发票</a-button>
                      </a-form-item>
                    </a-col>
                    <a-col :span="opearSpan">
                      <a-form-item>
                        <a-button type="primary" size="normal" block>领取发票</a-button>
                      </a-form-item>
                    </a-col>

                    <a-col :span="opearSpan">
                      <a-form-item>
                        <a-button type="primary" size="normal" block>水费减免</a-button>
                      </a-form-item>
                    </a-col>
                    <a-col :span="opearSpan">
                      <a-form-item>
                        <a-button type="primary" size="normal" block>缴费作废</a-button>
                      </a-form-item>
                    </a-col>

                    <a-col :span="opearSpan">
                      <a-form-item>
                        <a-button type="primary" size="normal" block>选择发票</a-button>
                      </a-form-item>
                    </a-col>

                  </a-row>
                </a-form>
              </a-tab-pane>
            </a-tabs>

          </a-col>
        </a-row>
      </div>

      <div>
        <a-tabs type="" tabPosition="top" class="mb-20" @change="handleSwitch" :destroy-on-hide="true">
          <a-tab-pane v-for="item in tabArr" :key="item.f_id" :tab="item.f_full_name" forceRender
            :destroy-on-hide="true">
          </a-tab-pane>
        </a-tabs>
      </div>

      <a-table :columns="columns" :data-source="tableData"
        :scroll="{ y: 'calc(100vh - 580px)', x: columns.length * 90 }" :loading="loading"></a-table>
    </div>
    <CustomForm ref="customFormRef" />
    <a-modal v-model:visible="visible" :title="popupTitle" :width="popupWidth" class="common-container-modal"
      @ok="handleSubmit" @cancel="handleCancel" :maskClosable="false">
      <template #closeIcon>
        <ModalClose :canFullscreen="false" @cancel="handleCancel" />
      </template>
      <div class="jnpf-common-search-box jnpf-common-search-box-modal">
        <a-form :colon="false" labelAlign="right" :model="listQuery" ref="formElRef" :class="getFormClass">
          <a-row :gutter="10">
            <a-col :span="8">
              <a-form-item :label="t('common.keyword')" name="keyword">
                <a-input v-model:value="listQuery.keyword" :placeholder="t('common.enterKeyword')" allowClear
                  @pressEnter="handleSearch" />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label=" ">
                <a-button type="primary" class="mr-2" @click="handleSearch">{{ t('common.queryText') }}</a-button>
                <a-button @click="handleReset">{{ t('common.resetText') }}</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <div class="jnpf-common-search-box-right">
          <a-tooltip placement="top">
            <template #title>
              <span>{{ t('common.redo') }}</span>
            </template>
            <RedoOutlined class="jnpf-common-search-box-right-icon" @click="initData" />
          </a-tooltip>
        </div>
      </div>

      <a-table :data-source="tableList" v-bind="getTableBindValues" @change="handleTableChange"
        :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange, type: 'radio' }"
        ref="tableElRef"></a-table>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, unref, toRaw, onMounted, reactive } from 'vue';
import { getFieldDataSelect } from '/@/api/onlineDev/visualDev';
import { useI18n } from '/@/hooks/web/useI18n';
import type { FormInstance } from 'ant-design-vue';
import ModalClose from '/@/components/Modal/src/components/ModalClose.vue';
import { RedoOutlined } from '@ant-design/icons-vue';
import { Modal as AModal } from 'ant-design-vue';
import { onlineUtils } from '/@/utils/jnpf';
import { getType, getListApi } from './helper/api';
type Key = string | number;
import CustomForm from '/@/views/common/dynamicModel/list/CustomForm.vue';
import { string } from 'vue-types';

interface TabType {
  f_id: string
  f_full_name: string
}
const tableElRef = ref<any>(null);
const formSpan: number = 6
const opearSpan: number = 12
const customFormRef = ref<any>(null);
const tabArr = ref<TabType[]>()
const columns = ref<any>([])
const tableData = ref<any>([])
const keyArr = 'abcdefghijklmnopqrstuvwxyz'.split('')
const loading = ref<Boolean>(true)
const visible = ref<Boolean>(false)
const popupTitle = ref<String>("选择数据")
const popupWidth = ref<String>("800px")
const tableList = ref<any>([])
const { t } = useI18n();
const formElRef = ref<FormInstance>();
const temp = {
  value: "btn_fc500c",
  label: "缴费",
  eventType: "2",
  event: {
    "btnType": 1,
    "modelId": "523021940714110917",
    "popupTitle": "自定义操作",
    "popupType": "dialog",
    "popupWidth": "800px",
    "formOptions": [
      {
        "currentField": "jnpf_ConsumptionPrice_jnpf_CustomerID",
        "field": "customerId"
      }
    ],
    "enableAllFields": false,
    "customBtn": true,
    "directPost": false,
    "func": "({ data, index, refresh, onlineUtils }) => {\r\n   \r\n}",
    "interfaceId": "523406618751139781",
    "interfaceName": "柜台收费_缴费支付",
    "interfaceUrl": "/api/ZX_Water/Payment/Pay",
    "templateJson": [
      {
        "id": "dd3911",
        "field": "customerI",
        "dataType": "varchar",
        "defaultValue": "",
        "required": 0,
        "fieldName": "",
        "relationField": "customerId",
        "sourceType": 1
      }
    ],
    "useConfirm": false,
    "confirmTitle": "此操作将通过接口处理",
    "dynamicFormColumn": ""
  }
}
const firstRow: any = {
  "ConsumptionID": "1000020170701",
  "F_INTE_ASSISTANT": null,
  "CustomerID": "10000",
  "PerviousMeterIndex": "0",
  "MeterIndex": "1",
  "Volume": "1",
  "jnpf_ConsumptionPrice_jnpf_WaterPrice": "1.88",
  "jnpf_ConsumptionPrice_jnpf_SurchargePrice1": "0",
  "jnpf_ConsumptionPrice_jnpf_PriceCheckStatus": "关",
  "jnpf_ConsumptionPrice_jnpf_PayStatus": "关",
  "jnpf_ConsumptionPrice_jnpf_CustomerID": "10000",
  "jnpf_Customer_jnpf_Name": "",
  "jnpf_Customer_jnpf_CustomerCode": "10000",
  "jnpf_Customer_jnpf_Address": "11111",
  "jnpf_Customer_jnpf_MobilePhone": "19967552207",
  "jnpf_CustomerMeter_jnpf_FactoryNum": "2310411457",
  "ROWINDEX": "1",
  "id": "",
  "CustomerID_id": "10000"
}
const dataForm: any = reactive({
  nameCode: "",
  customerCode: "",
  customerName: "",
  mobilePhone: "",
  factoryNum: "",
  address: "",
  addicationDecimal1Flag: "",
  overdueAmount: null,
  arrears: null,
  perviousBalance: null,
  comment: "",
  receivableAmount: null
})

const listQuery = reactive({
  keyword: '',
  currentPage: 1,
  pageSize: 20,
  modelId: "533439375426453445",
  relationField: "Name",
  columnOptions: "CustomerCode,Name,MobilePhone,jnpf_CustomerMeter_jnpf_MeterCode,Address"
})

const state = reactive<{
  selectedRowKeys: Key[];
  loading: boolean;
}>({
  selectedRowKeys: [],
  loading: false,
});

const onSelectChange = (selectedRowKeys: Key[]) => {
  console.log('selectedRowKeys changed: ', selectedRowKeys[0]);
  state.selectedRowKeys = selectedRowKeys;
};

const handleOpen = () => {
  listQuery.keyword = dataForm.nameCode
  initData()
  visible.value = true
}

const getTableBindValues = reactive({
  "columns": [
    {
      "width": 50,
      "title": "序号",
      "dataIndex": "index",
      "key": "index",
      "align": "center"
    },
    {
      "title": "用户编号",
      "dataIndex": "CustomerCode"
    },
    {
      "title": "用户姓名",
      "dataIndex": "Name"
    },
    {
      "title": "手机号码",
      "dataIndex": "MobilePhone"
    },
    {
      "title": "水表编号",
      "dataIndex": "jnpf_CustomerMeter_jnpf_MeterCode"
    },
    {
      "title": "地址",
      "dataIndex": "Address"
    }
  ],
  "pagination": {
    "current": 1,
    "pageSize": 20,
    "size": "small",
    "defaultPageSize": 20,
    "showSizeChanger": true,
    "pageSizeOptions": [
      "20",
      "50",
      "80",
      "100"
    ],
    "showQuickJumper": true,
    "total": 0
  },
  "rowSelection": {
    "type": "radio",
    "selectedRowKeys": []
  },
  "size": "small",
  "loading": false,
  "rowKey": "id",
  "scroll": {
    "y": 509.29999999999995
  },
  "class": "jnpf-basic-table"
})

let defaultValue: any = 0
let typeId: any = 0

function getForm() {
  const form = unref(formElRef);
  if (!form) {
    throw new Error('form is null!');
  }
  return form;
}

function handleReset() {
  getForm().resetFields();
  listQuery.keyword = '';
  handleSearch();
}

const getFormClass = [
  "jnpf-basic-form",
  "jnpf-basic-form--compact",
  "search-form"
]

function initData() {
  const query = {
    ...listQuery,
    keyword: listQuery.keyword
  };
  query.pageSize = query.pageSize > 100 ? 20 : query.pageSize
  getFieldDataSelect(query)
    .then(res => {
      console.log(res.data.list)
      tableList.value = res.data.list;
      getTableBindValues.pagination.total = res.data.pagination.total;
      getTableBindValues.loading = false;
    })
    .catch(() => {
      getTableBindValues.loading = false;
    });
}

function handleTableChange(pagination) {
  listQuery.currentPage = pagination.current;
  listQuery.pageSize = pagination.pageSize;
  initData();
}
const handleSubmit = () => {
  defaultValue = state.selectedRowKeys[0]
  dataForm.nameCode = state.selectedRowKeys[0]
  visible.value = false

  onlineUtils.request('/api/ZX_Water/Payment/GetPayInfo?customerId=' + dataForm.nameCode, 'post', { customerId: dataForm.nameCode }).then(res => {
    console.log(res.data)
    const tar = res.data

    dataForm.customerCode = tar.customerCode
    dataForm.customerName = tar.customerName
    dataForm.mobilePhone = tar.mobilePhone
    dataForm.address = tar.address
    dataForm.factoryNum = tar.factoryNum
    dataForm.comment = tar.comment

    dataForm.actualAmount = String(tar.actualAmount)
    dataForm.arrears = String(tar.arrears)
    dataForm.overdueAmount = String(tar.overdueAmount)
    dataForm.perviousBalance = String(tar.perviousBalance)
    dataForm.receivableAmount = String(tar.receivableAmount)
    handleSwitch(typeId)
  })
}

const handleCancel = () => {
  visible.value = false;
}

function handleSearch() {
  listQuery.currentPage = 1;
  listQuery.pageSize = 20;
  initData()
}

// 获取表格数据
const getData = (id, data) => {
  getListApi(id, data).then(res => {
    const arr = res.data

    let columnTemp: any = []
    const tables = arr.map((item, index) => {
      const arr = Object.keys(item)
      let field = {}
      field[keyArr[index]] = item[index]

      columnTemp = arr.map((_item, _index) => {
        field[keyArr[_index]] = item[_item]
        return {
          title: _item,
          dataIndex: keyArr[_index],
          customHeaderCell: function () {
            return {
              style: {
                'white-space': 'nowrap',
              },
            };
          }
        }
      })

      return field
    })
    columns.value = columnTemp
    tableData.value = tables
    loading.value = false
  })
}

// 打开弹层
function handlePopup(item, record) {
  const data = {
    ...item,
    recordModelId: item.recordModelId,
    record: toRaw(record),
    isPreview: false,
    webType: "2",
  };


  customFormRef.value?.init(data);
}


// 打开预存弹层
const handleOpenPrepay = () => {
  firstRow.id = '';
  firstRow.CustomerID = '10118';
  firstRow.CustomerId = '10118';
  console.log('firstRow');
  console.log(firstRow);

  handlePopup(temp.event, firstRow);
}

// 打开缴费弹层
const handleOpenPayment = () => {
  firstRow.id = '';
  firstRow.CustomerID = '10118';
  firstRow.CustomerId = '10118';
  console.log('firstRow');
  console.log(firstRow);

  temp.recordModelId = "523021940714110917";
  handlePopup(temp.event, firstRow);
}


// 切换标签
const handleSwitch = (e: string) => {
  typeId = e
  loading.value = true
  tableData.value = []
  const data = {
    origin: "preview",
    tenantId: "default",
    paramList: [{
      dataType: "varchar",
      defaultValue,
      field: "CustomerID",
      fieldName: "用户ID",
      id: "bd01da",
      required: "1",
      source: null
    }]
  }
  getData(typeId, data)
}

onMounted(() => {
  getType().then((res: any) => {
    tabArr.value = res.data
    console.log(res.data)
    typeId = res.data.length && res.data[0].f_id
    handleSwitch(typeId)
  })
})
</script>

<style scoped>
.tags {
  padding: 15px 0
}

.tags .item {
  margin-right: 20px;
  cursor: pointer;
  padding-bottom: 15px;
}

.item.on {
  color: #1890ff;
  border-bottom: 2px solid #1890ff;
}

.comment {
  height: 32px;
  line-height: 32px;
  padding: 0 12px;
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
}

.a-box {
  background-color: #fff;
  padding: 12px 15px 0;
}

:deep(.ant-card-body) {
  padding-bottom: 0 !important;
}
</style>